<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>简单用法 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>简单用法</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">简单用法</div>
                <div class="layui-card-body">
                    <!--筛选表单 表格上方-->
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <!--学号姓名-->
                            <div class="layui-inline">
                                <div class="layui-input-inline" style="width: 250px;">
                                    <input type="text" name="sn" placeholder="学号/姓名" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <!--角色下拉框-->
                            <div class="layui-inline">
                                <div class="layui-input-inline" style="width: 250px;">
                                    <select class="layui-input" name="roleId" lay-verify="" id="roleId">
                                        <option value="">请选择角色</option>
                                    </select>
                                </div>
                            </div>
                            <!--状态下拉框-->
                            <div class="layui-inline">
                                <div class="layui-input-inline" style="width: 250px;">
                                    <select class="layui-input" name="enabled" lay-verify="">
                                        <option value="">选择状态</option>
                                        <option value="true">启用</option>
                                        <option value="false">禁用</option>
                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline" style="width: 250px;">
                                        <button type="submit" class="layui-btn" lay-submit lay-filter="selectUser">搜索
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--表格主体-->
                    <table class="layui-hide" id="batch_table" lay-filter="batch_table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--申请弹出框-->
<div style="display: none" id="applyUserDialog">
    <div class="layui-form" action="" style="margin-top: 20px">
        <input type="hidden" name="batchId" id="batchId">
        <!--输入框1 学号工号-->
        <!--<div style="margin-right: 20px" class="layui-form-item">
            <label class="layui-form-label">工号/学号</label>
            <div class="layui-input-block">
                <input type="text" id="updateSn" name="sn" required readonly lay-verify="required"
                       placeholder="请输入工号/学号" autocomplete="off" class="layui-input">
            </div>
        </div>-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请输入申请理由</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入申请理由" class="layui-textarea" name="applicationReason"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="applyUser">保存</button>
                <button type="reset" id="applyClose" class="layui-btn layui-btn-primary">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--审核弹出框-->
<div style="display: none" id="auditUserDialog">
    <div class="layui-form" action="" style="margin-top: 20px">
        <input type="hidden" name="id" id="id">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">审核结果</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="TG" title="通过" checked>
                <input type="radio" name="status" value="BTG" title="不通过" >
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请输入审核理由</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入审核理由" class="layui-textarea" name="auditComment"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="auditUser">保存</button>
                <button type="reset" id="applyClose" class="layui-btn layui-btn-primary">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--批量审核弹出框-->
<div style="display: none" id="auditsUserDialog">
    <div class="layui-form" action="" style="margin-top: 20px">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">审核结果</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="TG" title="通过" checked>
                <input type="radio" name="status" value="BTG" title="不通过" >
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请输入审核理由</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入审核理由" class="layui-textarea" name="auditComment"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="audits">保存</button>
                <button type="reset"  class="layui-btn layui-btn-primary">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--编辑弹出框-->
<div style="display: none" id="updateUserDialog">
    <div class="layui-form" action="" style="margin-top: 20px">
        <input type="hidden" name="id" id="updateId">
        <!--输入框1 学号工号-->
        <div style="margin-right: 20px" class="layui-form-item">
            <label class="layui-form-label">工号/学号</label>
            <div class="layui-input-block">
                <input type="text" id="updateSn" name="sn" required readonly lay-verify="required"
                       placeholder="请输入工号/学号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--输入框2 姓名-->
        <div style="margin-right: 20px" class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" id="updateName" name="name" required lay-verify="required" placeholder="请输入姓名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--输入框3 密码-->
        <div style="margin-right: 20px" class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" id="updatePassword" name="password" required lay-verify="required"
                       placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--多选框 角色-->
        <div style="margin-right: 20px" class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="roleId" lay-verify="required" id="updateRoleId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateUser">保存</button>
                <button type="reset" id="updateClose" class="layui-btn layui-btn-primary">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--添加弹出框-->
<div style="display: none" id="addUserDialog">
    <div class="layui-form" action="" style="margin-top: 20px" lay-filter="clearAll" id="clearAll">
        <!--输入框1 学号工号-->
        <div style="margin-right: 20px" class="layui-form-item">
            <label class="layui-form-label">工号/学号</label>
            <div class="layui-input-block">
                <input type="text" id="addSn" name="sn" required lay-verify="required"
                       placeholder="请输入工号/学号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--输入框2 姓名-->
        <div style="margin-right: 20px" class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" id="addName" name="name" required lay-verify="required" placeholder="请输入姓名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--输入框3 密码-->
        <div style="margin-right: 20px" class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" id="addPassword" name="password" required lay-verify="required"
                       placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--多选框 角色-->
        <div style="margin-right: 20px" class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="roleId" lay-verify="required" id="addRoleId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addUser">保存</button>
                <button type="button" id="addClose" class="layui-btn layui-btn-primary">关闭</button>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="batchSettingTemp" th:inline="javascript">
    <span th:if="${session.login.roleId!=1}" >{{d.batchSetting.name}}</span>
</script>
<!--状态模板 模板引擎 动态表格 id="enabled"-->
<script type="text/html" id="enabled" th:inline="javascript">
    <input th:if="${session.login.roleId==2}" type="checkbox" name="lock" value="{{d.id}}" title="启用" lay-filter="lockDemo" {{ d.active ? 'checked' : '' }}>
    <span th:if="${session.login.roleId==1}" >{{d.active ? '启用' :'禁用'}}</span>
</script>
<!--操作列模板-->
<script type="text/html" id="action" th:inline="javascript" >
    <!--lay-event--><!--
    <button th:if="${session.login.roleId!=1}" type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
    <button th:if="${session.login.roleId!=1}" type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="edit">编辑</button>-->


    <button th:if="${session.login.roleId!=1}"  type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="audit">审核</button>
</script>
<!--操作表模板-->
<script type="text/html" id="tableAction">
    <span>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="audits">批量审核</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addUser">添加</button>
    </span>

</script>
<script src="layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: 'layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function () {
        var table = layui.table,
            $ = layui.$,
            form = layui.form;
        var roles = [];

        /*表格渲染 将后端响应的数据进行渲染*/
        table.render({//设置表格格式，发送请求接受数据？？？？
            elem: '#batch_table'//table id
            , url: "application/waitAuditList"//异步数据接口相关参数
            ,defaultToolbar:['filter']
            , toolbar: '#tableAction'/*操作表模板 对整个表的操作*/
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            /*表格列*/
            , cols: [
                [
                    {type: 'checkbox'}// 是否选中 复选框
                    , {field: 'id', title: 'ID'}
                    , {field: 'sn', title: '学生sn'}
                    , {field: 'name', title: '学生姓名'}
                    , {field:'batchName',title: '申请批次',templet:"#batchSettingTemp"}
                    , {field: 'gender', title: '性别'}
                    , {field: 'applyDate', title: '申请时间'}
                    , {field: 'collegeName', title: '学院名'}
                    , {field:'majorName',title: '专业名'}
                    , {field:'className',title: '班级名'}
                    , {field:'difficultyLevel',title: '困难等级级别'}
                    , {field:'applicationReason',title: '申请理由'}
                    , {field:'currentNodeCode',title: '当前节点'}
                    , {field:'status',title: '状态'}
                    , {title: '操作', templet: "#action"}//操作列
                ]
            ]
            /*数据解析的回调函数，将后端返回的任意格式的数据解析成table组件规定的格式
            * 表格重载，异步数据参数
            * 将后端传输过来的数据解析
            * res是后端返回的JSON数据，需要将其解析为前端需要的格式
            * */
            , parseData: function (res) {
                return {
                    code: res.code,
                    ms: res.message,
                    count: res.data.total,
                    data: res.data.records,
                }
            }

            , page: true//开启分页
            , limit: 5//每页条数 默认10条
            , limits: [5, 10, 15, 20, 25]//分页下拉框选择每页可显示的条数
            /*将前端发送请求中的page和limit重新命名*/
            , request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            }
        });
        //搜索
        /*提交事件*/
        form.on("submit(selectUser)", function (data) {
            /*表格重载 重新渲染表格 uaer_table==》lay_filter*/
            table.reload("user_table", {
                where: data.field,//条件
                /*分页*/
                page: {
                    pageNum: 1,
                    pageSize: 5
                }
            })
        })
        /*
        * 获取所有角色
        * 从数据字典中加载出角色的内容，
        * 动态的渲染到角色下拉框中
        */
        $.ajax({
            type: 'get',
            url: '/dictionary/getByType?type=Role',
            success: function (res) {
                $(res.data).each(function (index, item) {
                    roles.push(item)
                    var $new = $("<option value='" + item.itemValue + "'>" + item.itemName + "</option>")
                    $("#roleId").append($new)
                })
                form.render('select');
            }
        })

        /*行事件
        * 表格监听table.on  行工具事件 tool 监听的哪一个表user_table==》lay-filter
        * 对表格的行事件进行监听
        * 通过对相应的lay-event进行匹配
        * 进行不同的操作
        * function中的res 指选中行的数据
        * */
        table.on("tool(batch_table)", function (res) {
            var event = res.event
            switch (event) {
                case"delete"://delete事件
                    deleteEvent(res.data);
                    break;
                case "edit"://编辑事件
                    editUser(res.data);
                    break;
                case "apply"://申请
                    applyEvent(res.data);
                    break;
                case "audit"://审核
                    auditEvent(res.data);
                    break;

            }
        })

        /*
        * 单个删除 表格行事件
        * user==》由监听中传下来的事件
        * */
        function deleteEvent(user) {
            //每一个弹窗都有一个唯一的ID值，当前的index就是弹窗的id值
            layer.confirm('是否删除' + user.name + "?", {icon: 5, title: '提示'}, function (index) {
                $.ajax({
                    type: 'post',
                    url: '/whitelistSetting/removeById',
                    data: JSON.stringify({id: user.id}),
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.data) {
                            layer.msg('删除成功', {icon: 6, time: 1500}, function () {
                                table.reload("user_table", {//表格重载
                                    where: {},
                                    page: {
                                        pageNum: 1,
                                        pageSize: 5
                                    }
                                })
                            })
                        }
                    }
                })
            });
        }

        /*
        * 编辑
        * 弹出层
        * user==》指事件发生的当前行数据
        * */
        function editUser(user) {
            //弹框之前给输入框复制
            $("#updateId").val(user.id)
            $("#updateSn").val(user.sn)
            $("#updateName").val(user.name)
            $("#updatePassword").val(user.password)
            //加载角色前清空上一次渲染的角色信息
            $("#updateRoleId").empty()
            //动态加载弹出框角色
            $(roles).each(function (index, item) {
                var $new = $("<option value='" + item.itemValue + "'>" + item.itemName + "</option>")
                $("#updateRoleId").append($new)
            })
            /*????????*/
            form.render('select');
            $("#updateRoleId").val(user.roleId)
            //再次刷新
            form.render('select');

            /*
            * 弹出层，弹出
            * */
            layer.open({
                type: 1,//弹出层类型
                closeBtn: 2,
                content: $('#updateUserDialog'),//弹出层的id值
                area: ['500px', '330px']
            })
        }
        /*
        * 保存
        * 编辑弹出层
        * */
        form.on('submit(updateUser)', function (res) {
            var index = layer.load(1);
            $.ajax({
                type: 'post',
                url: '/whitelistSetting/update',
                data: res.field,
                success: function (res) {
                    if (res.data) {
                        layer.msg('更新成功', {icon: 6, time: 1500}, function () {
                            layer.closeAll();
                            table.reload("user_table", {
                                where: {},
                                page: {
                                    pageNum: 1,
                                    pageSize: 5
                                }
                            })
                        })
                    }
                }
            })
        })
        //编辑弹出框关闭
        $("#updateClose").click(function () {
            layer.closeAll()
        })
        //表单复选框  状态修改
        form.on('checkbox(lockDemo)', function (res) {
            var user = {
                id: res.value,
                enabled: res.elem.checked
            }

            $.ajax({
                type: 'post',
                url: 'whitelistSetting/update',
                data: user,
                success: function (res) {
                    if (res.data) {
                        layer.msg('修改成功', {icon: 6, time: 1000})
                    }
                }
            })
        })

        /*学生申请*/
        function applyEvent(user){
            console.info(user)
            /*判断当前批次是否启用*/
            if(!user.active){
                layer.msg("当前批次未启用，请重新选择",{icon:5,time:1000},function () {
                    layer.closeAll()
                })
            }else{
                /*还需要做：
                * 当前批次是否已经申请
                * 是否符合当前的申请标准*/

                $("#batchId").val(user.id)
                layer.open({
                    type: 1,
                    closeBtn: 2,
                    content: $('#applyUserDialog'),
                    area: ['500px', '330px']
                })
            }



        }
        /*学生申请提交事件*/
        form.on('submit(applyUser)',function (data) {
            $.ajax({
                type:'post',
                url:'/application/applicationSave',
                data:data.field,
                success:function () {
                    layer.msg("申请成功",{icon:6,time:1000},function () {
                        /*跳转到我的申请*/

                        layer.closeAll()
                    })
                }
            })
        })

        /*审核*/
        function auditEvent(data){
            $("#id").val(data.id)
            layer.open({
                type: 1,
                closeBtn: 2,
                content: $('#auditUserDialog'),
                area: ['500px', '330px']
            })
        }
        /*审核提交*/
        form.on('submit(auditUser)',function (data) {
            $.ajax({
                type:'post',
                url:'/application/audit',
                data:data.field,
                success:function () {
                    layer.msg('审核成功', {icon: 6, time: 1500}, function () {
                        layer.closeAll();
                        table.reload("batch_table", {
                            where: {},
                            page: {
                                pageNum: 1,
                                pageSize: 5
                            }
                        })
                    })
                }
            })
        })



        /*
        * 表事件  对整个表
        * toolbar==》绑定表事件
        * */
        table.on('toolbar(batch_table)', function (res) {
            var event = res.event
            switch (event) {
                case "audits":
                    auditsEvent();
                    break;
                case "addUser" :
                    addUser();
                    break;
            }
        })

        /*
        * 表事件
        * 批量审核
        * */
        function auditsEvent() {
            var checkStatus = table.checkStatus('batch_table')//user_table==>表的id值
            if (checkStatus.data.length === 0) {
                layer.msg('至少选中一行！', {icon: 5, time: 1500})
            } else {
                layer.open({
                    type: 1,
                    closeBtn: 2,
                    content: $('#auditsUserDialog'),
                    area: ['500px', '330px']
                })
                /*var ids=[];*/
                /*$(checkStatus.data).each(function (index,item) {
                  ids.push(item.id)
                })*/
                /*var ids = checkStatus.data.map(function (user) {
                    return user.id
                })
                layer.confirm('是否删除选中的' + checkStatus.data.length + "条数据？", {icon: 5, title: '提示'}, function (index) {
                    $.ajax({
                        type: 'post',
                        url: '/whitelistSetting/removeByIds',
                        data: JSON.stringify({ids: ids}),
                        contentType: 'application/json',
                        success: function (res) {
                            if (res.data) {
                                layer.msg('删除成功', {icon: 6, time: 1500}, function () {
                                    table.reload("user_table", {
                                        where: {},
                                        page: {
                                            pageNum: 1,
                                            pageSize: 5
                                        }
                                    })
                                })
                            }
                        }
                    })
                });*/
            }
        }

        form.on('submit(audits)',function (data) {
            layer.confirm('确定审核选中的数据', {icon: 5, title: '提示'}, function (index) {
                var checkStatus=table.checkStatus('batch_table')
                var objs=[]
                $(checkStatus.data).each(function (index,item) {
                    objs.push({
                        id:item.id,
                        status:data.field.status,
                        auditComment:data.field.auditComment
                    })
                })
                $.ajax({
                    type: 'post',
                    url: '/application/audits',
                    data: JSON.stringify({apps:objs}),
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.data) {
                            layer.msg('审核成功', {icon: 6, time: 1500}, function () {
                                layer.closeAll();
                                table.reload("user_table", {
                                    where: {},
                                    page: {
                                        pageNum: 1,
                                        pageSize: 5
                                    }
                                })
                            })
                        }
                    }
                })


            })
            // $.ajax({
            //     type:'post',
            //     url:'/application/audit',
            //     data:data.field,
            //     success:function () {
            //         layer.msg('审核成功', {icon: 6, time: 1500}, function () {
            //             layer.closeAll();
            //             table.reload("batch_table", {
            //                 where: {},
            //                 page: {
            //                     pageNum: 1,
            //                     pageSize: 5
            //                 }
            //             })
            //         })
            //     }
            // })
        })
        //添加用户
        function addUser() {

            //加载角色前清空
            $("#addRoleId").empty()
            //动态加载弹出框角色
            $(roles).each(function (index, item) {
                var $new = $("<option value='" + item.itemValue + "'>" + item.itemName + "</option>")
                $("#addRoleId").append($new)
            })
            form.render('select');

            layer.open({
                type: 1,
                closeBtn: 2,
                content: $('#addUserDialog'),
                area: ['500px', '330px']
            })
        }
        //添加时给输入框一个失去焦点事事件
        $("#addSn").blur(function () {
            addSubmit()
        })
        //给回车添加一个提交事件
        $("#addSn").keydown(function (event) {
            if (event.keyCode===13){
                addSubmit()
            }
        })
        //添加的提交按钮封装提交方法
        function addSubmit() {
            var sn=$("#addSn").val()
            $.ajax({
                type:'get',
                url:'/whitelistSetting/getBySn?sn='+sn,
                success:function (res) {
                    if(res.data===null){
                        layer.msg('用户不存在',{icon:6,time:1500},function () {
                            $("#addSn").val('')
                            $("#addName").val('')
                            $("#addPassword").val('')
                        })

                    }else{
                        console.info(res)
                        $("#addName").val(res.data.name)
                        $("#addRoleId").val(res.data.roleId)
                        form.render('select')
                        //添加用户保存
                        form.on('submit(addUser)',function (data) {

                            var index = layer.load(1);
                            $.ajax({
                                type: 'post',
                                url: '/whitelistSetting/save',
                                data: data.field,
                                success: function (res) {
                                    if (res.data) {
                                        layer.msg('添加成功', {icon: 6, time: 1500}, function () {
                                            layer.closeAll();
                                            table.reload("user_table", {
                                                where: {},
                                                page: {
                                                    pageNum: 1,
                                                    pageSize: 5
                                                }
                                            })
                                        })

                                    }else{
                                        layer.msg('当前用户已存在', {icon: 5, time: 1500},function () {
                                            layer.closeAll();
                                            $("#addSn").val('')
                                            $("#addName").val('')
                                            $("#addPassword").val('')

                                        })
                                    }
                                }
                            })
                        })
                    }
                }
            })
        }
        $("#addClose").click(function () {
            layer.closeAll()
            $("#addSn").val('')
            $("#addName").val('')
            $("#addPassword").val('')
            return false;
        })

    });



</script>
</body>
</html>